<template>
  <div class="home">
    <div>{{ appname }}</div>
    <div>{{ aboutname }}</div>
    <button @click="change">点击</button>
    <vueWangeditor width="100%" height="500" id="editor" v-model="text"></vueWangeditor>
  </div>
</template>

<script>
import vueWangeditor from 'vue-wangeditor'
import { 
  mapState, // vuex属性
  mapGetters,// vuex属性
  mapMutations, // vuex方法
  mapActions // vuex 方法
   } from "vuex";
export default {
  name: "Home",
    components: {
    vueWangeditor
  },
  data() {
    return {
      text: "",
      title: "1907A",
      flag: false,
      num: 0,
    };
  },
  computed: {
    ...mapState({
      // state（全局状态） => state.app(命令空间).appname(命令空间中的属性)
      appname: state => state.app.appname,
      aboutname: state => state.about.aboutname
    }),
    ...mapGetters(['computedName'])
  },
  updated() {
    this.num++;
    console.log(this.num);
  },
  methods: {
    // mutations,action 不存在命名空间
    ...mapMutations(['CHANGE_NAME']),
    ...mapActions(['changeName']),
    change() {
      this.changeName()
      
      // this.$store.commit('CHANGE_NAME', '李四')
      // this.$store.dispatch('changeAsyncName', '王五')
      // console.log(this.$store.getters.computedName)
    },
  },
};
</script>
